 <!doctype html>
 <html>
 <head>
   <script>
     function updateOnlineStatus(msg) {
       var status = document.getElementById("status");
       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
       status.setAttribute("class", condition);
       var state = document.getElementById("state");
       state.innerHTML = condition;
       var log = document.getElementById("log");
       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
     }
     function loaded() {
       updateOnlineStatus("load");
       document.body.addEventListener("offline", function () {
         updateOnlineStatus("offline")
       }, false);
       document.body.addEventListener("online", function () {
         updateOnlineStatus("online")
       }, false);
     }
	 
	 function saveData( item ){
    if ( navigator.onLine ) {
        saveToServer( item );
    } else {
        toSave.push( item );
    }
}
 
function loadData( item ){
    if ( navigator.onLine ) {
        return loadFromServer( item );
    } else {
        var result = loadFromQueue( item );
        if ( !result ) {
            displayError();
            toLoad.push( item );
        }
        return result;
    }
}
 
setInterval(function(){
    if ( navigator.onLine ) {
        var item = predictNextItemToBeLoaded();
        loadData( item );
    }
}, 5000);
 
window.ononline = function(){
    toSave.forEach( saveData );
    toLoad.forEach( loadData );
};
 
window.onload = function(){
    document.getElementById("myform").onsubmit = function(){
        saveData( this );
        return false;
    };
};
   </script>
   <style>...</style>
 </head>
 <body onload="loaded()">
   <div id="status"><p id="state"></p></div>
   <div id="log"></div>
 </body>
 </html>